<!DOCTYPE html>
<html lang="en">

</html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>综合管理平台</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body class="Login">
  <!--Login-开始-->

  <div class="Login_heand dk">
    <a href="#" class="Login_logo fl">
      <img src="images/logo.png" class="fl" />
      <p class="fl">综合管理平台</p>
      <div class="clear"></div>
    </a>
  </div>

  <div class="Login_k">
    <div class="Login_T">
      用户注册
      <p></p>
    </div>
    <!--登录-开始-->
    <form class="Login_dl">
      <div class="Login_row">
        <input name="zhanghao" type="text" value="" class="Login_input Login_inp1" id="userName" placeholder="用户名"
          onblur="Onusername()" />
        <span id="userName_prompt"></span>
      </div>
      <div class="Login_row">
        <input name="password" type="password" value="" class="Login_input Login_inp2" id="pwd" placeholder="密码"
          onblur="Onpassword()" />
        <span id="pwd_prompt"></span>
      </div>
      <div class="Login_row">
        <input name="password" type="password" value="" class="Login_input Login_inp2" id="repwd" placeholder="确认密码"
          onblur="Onrepassword()" />
        <span id="repwd_prompt"></span>
      </div>
      <div class="Login_row">
        <input name="email" type="email" value="" class="Login_input Login_inp3" id="email" placeholder="邮箱地址"
          onblur="Oemail()" />
        <span id="email_prompt"></span>
      </div>
      <a href="#" class="Login_dla" onclick=" register_btn()">注册</a>

      <label class="Login_pitch fl">
        <input type="checkbox" name="checkbox01" class="fl" />
        <div class="fl">自动登录</div>
        <div class="clear"></div>
      </label>
      <div class="Login_wj fr">
        <a href="login.html">返回登录</a>
      </div>
      <div class="clear"></div>
    </form>
    <!--登录-结束-->
  </div>
  <!--Login-结束-->
  <script>
    //正则表达式注册验证,验证失败将提示输出在输入框下面,验证成功将提示清空


    //用户名验证
    function Onusername() {
      var username = document.getElementById("userName").value;
      var username_prompt = document.getElementById("userName_prompt");
      var username_reg = /^[a-zA-Z0-9_-]{4,16}$/;

      if (username_reg.test(username)) {
        username_prompt.innerHTML = "";
        return true;
      } else {
        username_prompt.innerHTML = "用户名格式不正确";
        return false;
      }
    }
    //密码验证
    function Onpassword() {
      var password = document.getElementById("pwd").value;
      var password_prompt = document.getElementById("pwd_prompt");
      var password_reg = /^[a-zA-Z0-9_-]{6,16}$/;
      if (password_reg.test(password)) {
        password_prompt.innerHTML = "";
        return true;
      }
      else {
        password_prompt.innerHTML = "密码格式不正确";
        return false;
      }
    }

    //确认密码验证

    function Onrepassword() {
      var repassword = document.getElementById("repwd").value;
      var repassword_prompt = document.getElementById("repwd_prompt");
      var password = document.getElementById("pwd").value;
      if (repassword == password) {
        repassword_prompt.innerHTML = "";
        return true;
      } else {
        repassword_prompt.innerHTML = "两次密码不一致";
        return false;
      }
    }
    //邮箱验证
    function Oemail() {
      var email = document.getElementById("email").value;
      var email_prompt = document.getElementById("email_prompt");
      var email_reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (email_reg.test(email)) {
        email_prompt.innerHTML = "";
        return true;
      } else {
        email_prompt.innerHTML = "邮箱格式不正确";
        return false;
      }
    }
    //注册按钮验证成功跳转到
    function register_btn() {
      if (Onusername() && Onpassword() && Onrepassword() && Oemail()) {
        register();
      }
    }

    //把验证成功的信息储存到本地

    function register() {
      var username = document.getElementById("userName").value;
      var password = document.getElementById("pwd").value;
      var email = document.getElementById("email").value;
      var userInfo = {
        username: username,
        password: password,
        email: email
      }
      var userInfo_str = JSON.stringify(userInfo);
      localStorage.setItem('userInfo', userInfo_str);
      window.location.href = "login.html";
    }
  </script>
</body>

</html>